<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>

    /*1、盒模型*/
    .demo {
        width: 100px;
        height: 100px;
        border: 1px solid #ddd;
        /*background: #f2f2f2;*/
        border-top-color:red;
        border-right-color:green;
        border-bottom-color:black;
        border-left-color:orange;

        border-radius:0  8px 0 8px;
    }

    .btn {
        border-width: 4px;
    }

    .card{
        background: red;
        width: 100px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        border-radius: 6px;
    }
    .text{
        display: inline-block;
        width: 50px;
        height: 50px;
        line-height: 50px;
        background: #fff;
        border-radius: 50%;
    }

    table{
        background: red;
        border-radius: 8px 8px 0 0;
        font-size: 18px;
        color: #fff;
        border-collapse: collapse;
        overflow: hidden;
    }

</style>

<body>

<div class="demo"></div>


<button class="btn">确认</button>

<div class="card">
    <div class="text">
        demo1
    </div>
</div>

<table>
    <tr>
        <td>姓名</td><td>年龄</td>
    </tr>
    <tr>
        <td>demo</td><td>19</td>
    </tr>
</table>

</body>
</html>